<template>
    <div class="wrapper">
        <ul class="content">
            <li v-for="(v, i) of 100" :key="i">{{ v }}</li>
        </ul>
        <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
    </div>

    <div class="wrapper2">
        <ul class="content">
            <li v-for="(v, i) of 100" :key="i">{{ v }}</li>
        </ul>
        <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
    </div>
</template>

<script>
import { defineComponent, onMounted, computed } from "vue";
import BScroll from "@better-scroll/core";
export default defineComponent({
    props: ["list"],
    setup(props) {
        onMounted(() => {
            let wrapper = document.querySelector(".wrapper");
            let scroll = new BScroll(wrapper);

            let wrapper2 = document.querySelector(".wrapper2");
            let scroll2 = new BScroll(wrapper2, {
                scrollX: true,
                scrollY: false,
                click: true,
                probeType: 3 // listening scroll hook
            });
        });
        return {};
    },
    mounted() {}
});
</script>

<style lang="scss" scoped>
.wrapper {
    height: 200px;
    border: 1px solid red;
    overflow: hidden;
}

.wrapper2 {
    width: 100%;
    height: 200px;
    border: 1px solid red;
    overflow: hidden;
    white-space: nowrap;
    ul {
        display: inline-block;
    }
    li {
        display: inline-block;
        width: 100px;
    }
}
</style>
